import { Input, Tree } from 'antd';
import type { DataNode } from 'antd/es/tree';
import React, { useState } from 'react';
const { Search } = Input;
const App: React.FC = () => {
  const [expandedKeys, setExpandedKeys] = useState<React.Key[]>([]);
  const [searchValue, setSearchValue] = useState('');
  const [autoExpandParent, setAutoExpandParent] = useState(true);

  const onExpand = (newExpandedKeys: React.Key[]) => {
    setExpandedKeys(newExpandedKeys);
    setAutoExpandParent(false);
  };

  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {};

  const treeData: DataNode[] = [
    {
      title: '靶场系统F204',
      key: '0-0',
      children: [
        {
          title: '靶场传输分系统F20402',
          key: '0-0-0',
          children: [
            {
              title: '终端光学分系统',
              key: '0-0-0-0',
              children: [
                {
                  title: '集束终端',
                  key: '0-0-0-0-0',
                  children: [
                    {
                      title: 'OM2类光机模块',
                      key: '0-0-0-0-0-0',
                    },
                  ],
                },
                {
                  title: '真空衔接组件',
                  key: '0-0-0-01',
                  children: [
                    {
                      title: 'OM2类光机模块',
                      key: 'asdddadasdazxcz',
                    },
                    {
                      title: 'OM1类光机模块',
                      key: 'asdasdazssxcz',
                      children: [
                        {
                          title: '集束真空窗口OM1组件',
                          key: 'asdasdazxcz',
                          children: [
                            {
                              title: '1-真空窗口入库检测',
                              key: 'asdasdaddddzxcz',
                            },
                            {
                              title: '2-真空窗口清洗',
                              key: 'asdasdaddddzsssxcz',
                            },
                          ],
                        },
                      ],
                    },
                  ],
                },
              ],
            },
          ],
        },
      ],
    },
  ];

  return (
    <div style={{ padding: '0 10px', height: '100%' }}>
      <Search style={{ marginBottom: 8 }} placeholder="Search" onChange={onChange} />
      {/* expandedKeys={expandedKeys} */}
      <Tree
        defaultExpandAll={true}
        showLine
        onExpand={onExpand}
        autoExpandParent={autoExpandParent}
        treeData={treeData}
      />
    </div>
  );
};

export default App;
